<template>
    <div class="top" :style="{position:position,zIndex:zIndex}">
     
      <div class="Link">
          
          <div class="link">
              <ul>   
                  <li style="position: absolute;left: 30px;"><a href="index.html">MSDN</a></li>
                  <li  style="position: absolute;left: 100px;">创作中心</li>
                  <li v-if="login === 'yes'" style="margin-left: 35px;" class="dropdown">
                        <!-- <img src="@/assets/icon/person-circle.svg" alt="头像" style="margin-top: 4px;cursor: pointer;transform: scale(1.3);" class="avatar"> 
                         --><el-avatar :size="22" :src="user.circleUrl" style="cursor: pointer;" class="avatar"></el-avatar>
                        <div class="persondropdown">
                          <div class="nickname" style="width: 100%;height: 40px;  margin-top: 20px;line-height: 40px;padding-left: 70px;">
                              <h4>{{user.nickname}}</h4>                                  
                          </div>
                          <div class="detail" style="width: 100%;height: 60px;margin-top: 20px;">
                          
                            <div class="detail-number">
                              <div class="A" >
                                    <h2 style="margin-left: 5px;">0</h2>
                                   <p>粉丝</p>                                         
                              </div>
                              <div class="A" >
                                    <h2 style="margin-left: 5px;">0</h2>
                                   <p>关注</p>                                         
                              </div>
                              <div class="A" >
                                    <h2 style="margin-left: 5px;">0</h2>
                                   <p>获赞</p>                                         
                              </div>
                              
                          
                            
                            </div>
                          
                          
                                                                
                          </div>
                          <div class="person-list" style="width: 200px;height: 140px;margin-left: 20px;">
                                <ul >
                                  <li >
                                      <a href="/userCenter.html">
                                         <img src="@/assets/icon/person.svg" alt="个人中心" style="transform: scale(1.8);position: relative;left: 5px;">  
                                         <span style="margin-left: 20px;">个人中心</span>
                                      </a>
                                  </li>
                                  <li >
                                      <a href="javascript:;">
                                         <img src="@/assets/icon/box-arrow-right.svg" alt="个人中心" style="transform: scale(1.8); position: relative;left: 8px;">  
                                          <span style="margin-left: 20px;" @click="logOut">退出</span>
                                      </a>
                                  </li>
                               
                              </ul>
                          </div>
                           
                        </div>              
                  </li>

                  <li><a href="javascript:;">消息</a></li>
                  <li><a href="publish.html" target="_blank" class="publish">发布</a></li>
              </ul>
          </div>
      </div>
  </div>
</template>

<script>
export default {
name:"CreationTop",
data() {
  return {
    user:{
      nickname:localStorage.getItem("nickname"),
      circleUrl:localStorage.getItem("avatar"),
    },
    
      position:"",
      zIndex:"",
      url:"www",
      //v-if
      login:"no"
  }
},
methods: {
  logOut(){
      localStorage.removeItem('token');
      localStorage.removeItem('nickname');
      localStorage.removeItem('avatar');
      location.reload();
  }
 

},
mounted(){
  var token=localStorage.getItem('token')
  // console.log(phone);
  if(token!==null){
      this.login="yes"
  }
}
}
</script>

<style>
.top{
height: 45px;
width: 100%; 
position: sticky;
top: 0;
z-index: 3; 
background-color: white;
}

.top .Link{
height: 30px;
width:fit-content;
text-shadow: 1px 1px;
Font-style:oblique;
float:right;
margin-right: 50px;
white-space:nowrap;
}
.top .Link .link{
margin-top: 8px;
float:left;
white-space:nowrap;
margin-right: 80px;
}

.top .Link .link ul{
margin-top: 5px;
list-style-type: none;
float: right;
}

.top .Link .link ul li{
margin-left: 20px;
float:left
}

.top .Link .link ul li a{
font-size: 10px;
/* font-weight: bolder; */
color:black;
text-decoration: none;
margin-left: 10px;
}
a:hover{
opacity: 1;
}
.publish{
border: 1px solid greenyellow;
padding-bottom: 10px;
border-radius: 2.5ch;
background-color: greenyellow;
color: white;
display: block;
width: 60px;
height: 10px;
text-align: center;
line-height: 20px;
}
.persondropdown{
display: none;
position: absolute;
width: 240px;
height: 300px;
right: 280px;
background-color: white;
border-radius:2ch ;
border:1px solid greenyellow ;
top:35px
}
.avatar:hover+.persondropdown{
display: block;
}
.persondropdown:hover{
display: block;
}
.detail .detail-number{
    display: flex;
    justify-content: space-around;
}

.detail .detail-number .A{
width: 60px;
height: 60px;
padding-left: 15px;
margin-left: 10px;
float: left;
}
.person-list ul li a{
display: block;
/* background-color: rgb(19, 40, 94); */
width: 200px;
height: 40px;
box-sizing: border-box;
line-height: 40px;
border-bottom: 1px solid black;



}



</style>